<html>

<head>
    <title>幻灯片</title>
    <link rel="stylesheet" href="./style.css" />

    <script src="./index.js"></script>
</head>

<body>
    <div class="slideshow-container">
        <div class="mySlides fade">
            <div class="numbertext">1 / 3</div>
            <img src="./img/img_mountains_wide.jpg">
        </div>

        <div class="mySlides fade">
            <div class="numbertext">2 / 3</div>
            <img src="./img/img_fjords_wide.jpg">
        </div>

        <div class="mySlides fade">
            <div class="numbertext">3 / 3</div>
            <img src="./img/img_nature_wide.jpg">
        </div>

        <!-- 后续可以改成icon 更美观一些 -->
        <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
        <a class="next" onclick="plusSlides(1)">&#10095;</a>

        <div style="text-align: center">
            <span class="dot" onclick="currentSlide(1)"></span>
            <span class="dot" onclick="currentSlide(2)"></span>
            <span class="dot" onclick="currentSlide(3)"></span>
        </div>
    </div>
</body>

</html>